<template>
  <div class="bigbox">
    年级：
    <el-select v-model="value" placeholder="年级">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-button type="primary" class="search">查询</el-button>

  <!-- 表格 -->
  <el-table
    class="biaoge"
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="Id"
      width="180">
    </el-table-column>
    <el-table-column
      prop="grade"
      label="年级"
      width="180">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科">
    </el-table-column>
    <el-table-column
      prop="spname"
      label="视频名称">
    </el-table-column>
    <el-table-column
      prop="sjname"
      label="试卷名称">
    </el-table-column>
    <el-table-column
      prop="addtime"
      label="创建时间">
    </el-table-column>
    <el-table-column prop="operate" label="操作" width="180">
      <el-button @click="fn()">编辑</el-button>
      <el-button type="danger">删除</el-button>
    </el-table-column>
  </el-table>



  <!-- 分页功能 -->
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="1"
      layout="total, sizes, prev, pager, next, jumper"
      :total="4">
    </el-pagination>
  </div>

  </div>

</template>

<script>
export default {
  methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      fn(){
        this.$router.push("/shipinchuangbian")
      }
    },
  data() {
      return {
        // 分页
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        // 表格数据
        tableData: [
        {
          id: '4',
          grade: '一年级',
          subject: '数学',
          spname: '安全警示视频',
          sjname: '第二次月考',
          addtime:"2023-05-10 17:30:51"
        },
        {
          id: '4',
          grade: '一年级',
          subject: '数学',
          spname: '安全警示视频',
          sjname: '第二次月考',
          addtime:"2023-05-10 17:30:51"
        },
        {
          id: '4',
          grade: '一年级',
          subject: '数学',
          spname: '安全警示视频',
          sjname: '第二次月考',
          addtime:"2023-05-10 17:30:51"
        },
      ],
        // 下拉选项
        options: [{
          value: '选项1',
          label: '一年级'
        }, {
          value: '选项2',
          label: '二年级'
        }, {
          value: '选项3',
          label: '三年级'
        }, {
          value: '选项4',
          label: '四年级'
        }, {
          value: '选项5',
          label: '五年级'
        },
        {
          value: '选项6',
          label: '六年级'
        },
        {
          value: '选项7',
          label: '初一'
        },
        {
          value: '选项8',
          label: '初二'
        },
        {
          value: '选项9',
          label: '初三'
        },
        {
          value: '选项10',
          label: '高一'
        },
        {
          value: '选项11',
          label: '高二'
        },
        {
          value: '选项12',
          label: '高三'
        }
      ],
        value: '',
      }

      
      }
    }
</script>

<style scoped>
 .bigbox{
    background-color: #fff;
    padding: 30px;
  }
  .search{
    margin-left: 30px;
  }
  .biaoge{
    margin-top: 30px;
    margin-bottom: 70px;
  }
</style>